<template>
  <div class="module-management">
    <h2>模块管理</h2>
    <div class="form-group">
      <label for="moduleName">模块名称:</label>
      <input type="text" id="moduleName" v-model="newModule.name" required>
    </div>
    <div class="form-group">
      <label for="moduleDescription">模块描述:</label>
      <textarea id="moduleDescription" v-model="newModule.description" required></textarea>
    </div>
    <button @click="addModule">添加模块</button>
    <table>
      <thead>
        <tr>
          <th>模块名称</th>
          <th>模块描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="module in modules" :key="module.id">
          <td>{{ module.name }}</td>
          <td>{{ module.description }}</td>
          <td>
            <button @click="editModule(module)">编辑</button>
            <button @click="deleteModule(module.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newModule: {
        name: '',
        description: ''
      },
      modules: []
    };
  },
  mounted() {
    this.fetchAllModules();
  },
  methods: {
    async fetchAllModules() {
      try {
        // 从路径中提取项目 ID
        const pathParts = this.$route.path.split('/');
        const projectId = parseInt(pathParts[pathParts.length - 1], 10);

        // 获取模块列表
        const response = await axios.get(`http://localhost:8080/api/modules?projectId=${projectId}`);
        this.modules = response.data;
      } catch (error) {
        console.error('Failed to load module details:', error);
      }
    },
    async addModule() {
      try {
        // 添加新模块
        await axios.post('/api/modules', this.newModule);
        this.fetchAllModules(); // 刷新模块列表
        this.newModule = { name: '', description: '' };
      } catch (error) {
        console.error('Failed to add module:', error);
      }
    },
    async editModule(module) {
      this.newModule = { ...module };
      try {
        // 更新模块
        await axios.put('/api/modules', this.newModule);
        this.fetchAllModules(); // 刷新模块列表
      } catch (error) {
        console.error('Failed to edit module:', error);
      }
    },
    async deleteModule(id) {
      if (confirm('确定要删除此模块吗？')) {
        try {
          // 删除模块
          await axios.delete(`/api/modules/${id}`);
          this.fetchAllModules(); // 刷新模块列表
        } catch (error) {
          console.error('Failed to delete module:', error);
        }
      }
    }
  }
}
</script>

<style scoped>
.module-management {
  max-width: 600px;
  margin: auto;
}

.form-group {
  margin-bottom: 1em;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input,
textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5em;
  border: 1px solid #ccc;
}
</style>